<template>
  <div class="inputarea">
    <div class="multimedia">
      <el-popover
        placement="top-start"
        trigger="click"
        content="this is content, this is content, this is content"
      >
        <template #reference>
          <div class="emoji">
            <svg
              t="1681651222146"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="20824"
              width="22"
              height="22"
            >
              <path
                d="M512 64C264.576 64 64 264.576 64 512s200.576 448 448 448 448-200.576 448-448S759.424 64 512 64z m0 832C299.936 896 128 724.064 128 512S299.936 128 512 128s384 171.936 384 384-171.936 384-384 384z"
                p-id="20825"
                fill="#707070"
              ></path>
              <path
                d="M320 384m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z"
                p-id="20826"
                fill="#707070"
              ></path>
              <path
                d="M704 384m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z"
                p-id="20827"
                fill="#707070"
              ></path>
              <path
                d="M224 512c0 159.072 128.928 288 288 288s288-128.928 288-288H224z"
                p-id="20828"
                fill="#707070"
              ></path>
            </svg>
          </div>
        </template>
        <template #default>
          <VEmojiPicker @select="selectEmoji"></VEmojiPicker>
        </template>
      </el-popover>
    </div>

    <div class="inputBox">
      <el-input
        type="textarea"
        v-model="form.message"
        placeholder="Please input"
        ref="inputElement"
      />
      <div
        class="btn"
        @click="sendMessage"
      >
        <div>发送</div>
      </div>
    </div>

  </div>
</template>

 <script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      form: {
        user_id: this.$store.state.users.userInfo.id,
        room_id: this.room.id || null,
        username: this.$store.state.users.userInfo.username,
        message: "",
        avatar: this.$store.state.users.userInfo.user_pic,
      },
    };
  },
  props: ["room"],
  methods: {
    selectEmoji(emoji) {
      console.log(emoji);
      this.form.message += emoji.data;
    },

    sendMessage() {
      const fomeData = {
        user_id: this.$store.state.users.userInfo.id,
        room_id: this.room.id || null,
        username: this.$store.state.users.userInfo.username,
        message: this.form.message,
        avatar: this.$store.state.users.userInfo.user_pic,
      };
      this.$store.commit("updateMessageList", fomeData);
      // console.log(fomeData);
      // 触发
      this.$socket.emit("chatMessage", fomeData);

      // 点击这个群聊即选中这个群聊 将当前群聊信息传过去 store中
      this.$socket.emit("joinRoom", this.room.id);

      // const res = await updateRoomIsInRoomAPI();
      this.$store.dispatch("initCurrentRoomInfo", this.room);

      this.form.message = "";
      this.$bus.$emit("haveSendMsg");
    },
  },

  mounted() {},
};
</script>

 

<style scoped lang='less'>
.inputarea {
  padding: 20px;
  padding-top: 0px;
  position: relative;
  height: 210px;

  .multimedia {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 5px;
    div {
      cursor: pointer;
    }
    .emoji {
      display: flex;
      align-items: center;
    }
  }

  .inputBox {
    width: 100%;
    height: 180px;
    position: relative;
    white-space: pre-wrap;
    .btn {
      position: absolute;
      bottom: 30px;
      right: 10px;
      div {
        padding: 10px 10px;
        font-size: 16px;
        color: #3dc0fd;
        cursor: pointer;
      }
    }
  }
}

:deep(.el-textarea__inner) {
  height: 150px;
}

:deep(.el-textarea) {
  --el-input-focus-border-color: #a1c9db;
}
</style>